<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html>
  <head>
    <title>All three renderer's layers test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/require.js"></script>
    <script type="text/javascript">
(function () {
    var init, doStuff;

    require('imageloader', 'building', 'tile', 'unit', 'map', 'terrainlayer',
            'unitslayer', 'buildingslayer');

    init = function () {
        var loader;
        loader = new ImageLoader();
        loader.addObserver(function (percent) {
            if (percent == 1) {
                doStuff();
            }
        });
        loader.setPathPrefix('../');
        loader.load(BuildingsDefinition, UnitsDefinition, TilesDefinition);
    };

    doStuff = function () {
        var map, terrain, buildings, units, canvas, x, y, tx, ty, dimensions,
                context, i, unit, building;
        map = new Map();
        map.randomMap(100, 100);
        terrain = new TerrainLayer();
        terrain.setCanvas(document.getElementById('terrain'));
        terrain.setMap(map.getMap());
        terrain.init();
        buildings = new BuildingsLayer();
        buildings.setCanvas(document.getElementById('buildings'));
        buildings.setMap(map.getMap());
        for (i = 25; i--;) {
            building = new Building(Math.floor(Math.random() * 100),
                    Math.floor(Math.random() * 100), 0, 0, 'rgb(0,0,0)');
            buildings.onBuildingAdded(building);
        }
        units = new UnitsLayer();
        units.setCanvas(canvas = document.getElementById('units'));
        units.setMap(map.getMap());
        for (i = 500; i--;) {
            x = Math.floor(Math.random() * 100);
            y = Math.floor(Math.random() * 100);
            unit = new Unit(x, y, Math.floor(Math.random() * 8), 0, 0,
                    'rgb(0,0,0)');
            units.onUnitChange(unit);
        }
        x = y = tx = ty = 0;
        dimensions = terrain.getBufferDimensions();
        context = canvas.getContext('2d');
        setInterval(function () {
            var date = new Date().getTime();
            terrain.display(x, y);
            buildings.display(x, y);
            units.display(x, y);
            context.fillText("RenderTime: " + (new Date().getTime() - date) + " ms", 9, 9);
            context.fillText("FPS: " + (1000 / (new Date().getTime() - date)), 9, 24);
            if ((tx == x) && (ty == y)) {
                tx = Math.floor(Math.random() * dimensions.width - 1);
                ty = Math.floor(Math.random() * dimensions.height - 1);
            }
            x += tx > x ? 1 : (tx < x ? -1 : 0);
            y += ty > y ? 1 : (ty < y ? -1 : 0);
        }, 10);
    };

    addEventListener('DOMContentLoaded', init, false);
}());
    </script>
  </head>
  <body>
      <div style="height: 0px"><canvas id="terrain" width="800" height="600" style="border: 1px solid red"></canvas></div>
      <div style="height: 0px"><canvas id="buildings" width="800" height="600" style="border: 1px solid green"></canvas></div>
      <canvas id="units" width="800" height="600" style="border: 1px solid black"></canvas>
  </body>
</html>
